import React, { Component } from 'react';
import fetch from '@/utils/fetch'
import { Button } from 'antd';
import { Tabs } from './'

export default class DetailPage extends Component {
  constructor() {
    super();
    this.state = {
      cinema: {}
    }
    this.getCinemaDetail = this.getCinemaDetail.bind(this);
  }

  componentDidMount() {
    let id = this.props.match.params.id;
    this.getCinemaDetail(id);
  }

  getCinemaDetail(id) {
    let url = '/cinema/' + id;
    fetch(url, null, res=> {
      this.setState({
        cinema: res.cinema
      })
    })
  }

  render() {
    let cinema = this.state.cinema;
    cinema.telephones = [1234,123412,12341234];
    return (
      <div className="cinema-detail-page bg-gray">
         <div className="img-box">
            <img src="https://static.m.maizuo.com/v4/static/app/asset/66461d1a02a9eaa64876c90952c42aed.png" alt="" />
        </div>
        <div className="main">
            <div className="item">
                <p className="icon"><i className="iconfont icon-icon_ticket orange2x"></i></p>
                <div className="right">
                    <p className="intro">
                        <span>订座票</span>
                        <span className="f12 c999">选好场次及座位，到影院自助机取票</span>
                    </p>
                    <Button className="bg-orange2x cfff ifcc" style={{height:"0.44rem",width:"0.8rem"}}>立即订票</Button>
                    
                </div>
            </div>
            <div className="item" v-if="obj.address">
                <p className="icon"><i className="iconfont icon-aui-icon-location blue"></i></p>
                <p className="text">{cinema.address}</p>
            </div>
            <div className="item" v-if="obj.address">
                <p className="icon"><i className="iconfont icon-icon- orange2x" style={{fontSize: "22px"}}></i></p>
                <p className="text">
                    {
                      cinema.telephones && cinema.telephones.map((item,index)=> {
                          if (index>0) {
                              return <span key={index}>{' | '+item}</span>;
                            } else {
                              return <span key={index}>{item}</span>;
                            }
                      })
                    }
                </p>
            </div>
        </div>
        <Tabs />
      </div>
    );
  }
}
